<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>POST，FormData</title>
	</head>
	<body>
		<form name="person">
			<input type="name" value="John" />
			<input type="surname" value="Smith" />
		</form>

		<!-- 以 multipart/form-data 编码发送表单。 -->
		<script>
			// 从表单预填充 FormData
			let formData = new FormData(document.forms.person)

			// 附加一个字段
			formData.append('middle', 'Lee')

			// 发送请求
			let xhr = new XMLHttpRequest()
			xhr.open('POST', '/article/xmlhttprequest/post/user')
			xhr.send(formData)

			xhr.onload = function () {
				console.log(xhr.response)
			}
		</script>

		<!-- 以 application/json 编码发送表单。 -->
		<script>
			let xhr = new XMLHttpRequest()

			let json = JSON.stringify({
				name: 'John',
				surname: 'Smith',
			})

			xhr.open('POST', '/submit')
			xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8') // 设置请求参数数据格式为 json
			xhr.send(json) // .send(body) 方法就像一个非常杂食性的动物。它几乎可以发送任何 body，包括 Blob 和 BufferSource 对象。
		</script>
	</body>
</html>
